<template>
  <div class="social-circle">
    <div class="upper">
      <img :src="circle.imgUrl" alt="" class="upper-img" />
      <div class="upper-content">
        <div class="upper-title">
          {{ circle.groupName }}
        </div>
        <div class="upper-offical">
          <img
            src="../../assets/images/icons/icon_news.png"
            alt=""
            class="upper-offical__icon"
          />
          官方入住
        </div>
      </div>
      <div class="button--grey" v-if="circle.attention">
        已加入
      </div>
      <div class="button--active" v-if="!circle.attention">
        加入
      </div>
      <div class="upper-info">
        <div class="upper-info__node ">
          <div class="upper-info__node-title">
            动态
          </div>
          <div class="upper-info__node-number">
            {{ circle.movement }}
          </div>
        </div>
        <div class="gap"></div>
        <div class="upper-info__node">
          <div class="upper-info__node-title">
            成员
          </div>
          <div class="upper-info__node-number">
            {{ circle.members }}
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="top-title">
        <div class="sub-title">
          {{ '圈主(' + circle.circlerList.length + '人)' }}
        </div>
        <div
          class="show-hide"
          v-show="!isShowMoreCircler"
          @click="isShowMoreCircler = !isShowMoreCircler"
        >
          <span class="show-hide__inner-text">
            展开
          </span>
          <img
            src="../../assets/images/icons/icon_arrow_down_grey.png"
            class="show-hide__img"
            alt=""
            @click="isShowMoreCircler = !isShowMoreCircler"
          />
        </div>
        <div
          class="show-hide"
          v-show="isShowMoreCircler"
          @click="isShowMoreCircler = !isShowMoreCircler"
        >
          <span class="show-hide__inner-text"> 收起 </span>
          <img
            src="../../assets/images/icons/icon_arrow_up_grey.png"
            alt="收起"
            class="show-hide__img"
          />
        </div>
      </div>

      <ul class="middle-content  list">
        <li
          class="list-node"
          v-for="(circler, index) in showCircleList"
          :key="index"
        >
          <img :src="circler.pic" alt="" class="list-node__img" />
          <div class="list-node__info">
            <div class="list-node__info-title">
              {{ circler.name }}
            </div>
            <div class="list-node__info-sub-title">
              {{ circler.signature }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <div class="top-title">
        <div class="sub-title">
          {{ '解答组(' + circle.answerList.length + '人)' }}
        </div>
        <div
          class="show-hide"
          v-show="!isShowMoreAnswer"
          @click="isShowMoreAnswer = !isShowMoreAnswer"
        >
          <span class="show-hide__inner-text">
            展开
          </span>
          <img
            src="../../assets/images/icons/icon_arrow_down_grey.png"
            class="show-hide__img"
            alt=""
          />
        </div>
        <div
          class="show-hide"
          v-show="isShowMoreAnswer"
          @click="isShowMoreAnswer = !isShowMoreAnswer"
        >
          <span class="show-hide__inner-text"> 收起 </span>
          <img
            src="../../assets/images/icons/icon_arrow_up_grey.png"
            alt="收起"
            class="show-hide__img"
          />
        </div>
      </div>
      <ul class="list-min">
        <li
          class="list-min-node"
          v-for="(answer, index) in showAnswerList"
          :key="index"
        >
          <img :src="answer.pic" alt="" class="list-min-node__img" />
          <div class="list-min-node__innerText">
            {{ answer.name }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    id: {
      type: String,
      default: null,
    },
    //圈子最少人数
    minCirNum: {
      type: Number,
      default: 3,
    },
    //圈子最多人数
    maxCirNum: {
      type: Number,
      default: 5,
    },
    //解答人最少人数
    minAnsNum: {
      type: Number,
      default: 8,
    },
    maxAnsNum: {
      type: Number,
      default: 20,
    },
  },
  name: '',
  data() {
    return {
      isShowMoreCircler: false,
      isShowMoreAnswer: false,
      circle: {
        name: '穿戴酷玩圈子7',
        // 1 为官方入住
        tag: '1',
        // 是否关注
        attention: true,
        movement: 2798,
        members: 9009,
        imgUrl: 'https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF',
        circlerList: [
          {
            id: '9099',
            pic: 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF',
            name: '一只大能猫',
            signature: '但使龙城飞将在，不教胡马渡阴山',
          },
          {
            id: '9019',
            pic: 'https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF',
            name: '南山王之涣',
            signature: '羌笛何须怨杨柳，春风不度玉门关',
          },
          {
            id: '1099',
            pic: 'https://t7.baidu.com/it/u=1831997705,836992814&fm=193&f=GIF',
            name: '我的电脑',
            signature: '醉卧沙场君莫笑，古来征战几人回',
          },
          {
            id: '9009',
            pic: 'https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF',
            name: '一只大Dog',
            signature: '不知何去吹芦管，一夜征人尽望乡',
          },
          {
            id: '9039',
            pic: 'https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF',
            name: 'Cats',
            signature: '但使龙城飞将在，不教胡马渡阴山',
          },
        ],
        answerList: [
          {
            name: '张三三',
            pic:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649178992,1821853682&fm=26&gp=0.jpg',
          },
          {
            name: '王呜呜',
            pic:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1601406830,2108761440&fm=26&gp=0.jpg',
          },
          {
            name: '郑姗姗',
            pic:
              'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3741733804,1966033566&fm=26&gp=0.jpg',
          },
          {
            name: '刘大大',
            pic:
              'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3741733804,1966033566&fm=26&gp=0.jpg',
          },
          {
            name: '呵呵哒',
            pic:
              'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3129543975,2431122889&fm=26&gp=0.jpg',
          },
          {
            name: '李思思',
            pic:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649178992,1821853682&fm=26&gp=0.jpg',
          },
          {
            name: '章伯钧',
            pic:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649178992,1821853682&fm=26&gp=0.jpg',
          },
          {
            name: '严章雨',
            pic: 'https://t7.baidu.com/it/u=2405382010,1555992666&fm=193&f=GIF',
          },
          {
            name: '溜溜球',
            pic:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649178992,1821853682&fm=26&gp=0.jpg',
          },
          {
            name: '呜呜哒',
            pic:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649178992,1821853682&fm=26&gp=0.jpg',
          },
          {
            name: '萌萌哒',
            pic:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649178992,1821853682&fm=26&gp=0.jpg',
          },
          {
            name: '补补水',
            pic:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649178992,1821853682&fm=26&gp=0.jpg',
          },
          {
            name: '思维搭',
            pic:
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649178992,1821853682&fm=26&gp=0.jpg',
          },
        ],
      },
    }
  },
  watch: {},
  computed: {
    showCircleList() {
      return this.isShowMoreCircler
        ? this.circle.circlerList.slice(0, this.maxCirNum)
        : this.circle.circlerList.slice(0, this.minCirNum)
    },
    showAnswerList() {
      return this.isShowMoreAnswer
        ? this.circle.answerList.slice(0, this.maxAnsNum)
        : this.circle.answerList.slice(0, this.minAnsNum)
    },
  },
  methods: {},
  created() {},
  mounted() {},
}
</script>
<style lang="scss" scoped>
.upper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 376px;
  height: 364px;
  background: $color-background;
}
.upper-img {
  margin-top: 40px;
  margin-bottom: 24px;
  width: 88px;
  height: 88px;
  border-radius: 8px;
}
.upper-content {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upper-title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  padding-bottom: 2px;
}
.upper-offical {
  font-weight: 500;
  color: rgba($color: #000000, $alpha: 0.6);
  display: flex;
  align-items: center;
}
.upper-offical__icon {
  width: 17px;
}
.upper-info {
  position: relative;
  padding-top: 24px;
  display: flex;
}

.upper-info__node {
  width: calc((376px - 48px) / 2);
}
.gap {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 32px;
  border-right: 1px solid rgba(#000000, 0.1);
}
.upper-info__node-title {
  opacity: 0.6;
  padding-bottom: 8px;
  line-height: 20px;
  text-align: center;
}
.upper-info__node-number {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}
.middle {
  padding: 24px;
  margin-top: 8px;
  background: $color-background;
}
.top-title {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  padding-bottom: 24px;
}
.sub-title {
  font-weight: 500;
  font-size: 16px;
}
.show-hide {
  padding-bottom: 8px;
}
.show-hide__inner-text {
  color: rgba($color: #000000, $alpha: 0.6);
  font-weight: 400;
  padding-left: 5px;
  vertical-align: super;
}
.show-hide__img {
  width: 20px;
}
.list-node {
  display: flex;
  align-items: center;
  padding-bottom: 24px;
}
.list-node__img {
  margin-right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.list-node__info-title {
  padding-bottom: 8px;
  font-size: 16px;
  line-height: 24px;
}
.list-node__info-sub-title {
  color: rgba($color: #000000, $alpha: 0.6);
  line-height: 20px;
}
.bottom {
  padding: 24px;
  margin-top: 8px;
  background: $color-background;
}
.list-min {
  display: flex;
  flex-wrap: wrap;
}
.list-min-node {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.list-min-node__img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 8px;
}
.list-min-node__inner-text {
  text-align: center;
  font-size: 16px;
}
.button--grey {
  @include button(rgba(#000000, 0.05), rgba(#000000, 0.6));
}
.button--active {
  @include button($color-royole, #ffffff);
}
</style>
